// 配置路由规则

import React, { lazy, Suspense } from 'react';
// 引入页面级组件 

// 导入Route组件
import { Route, Redirect, Switch } from 'react-router-dom';
import Loading from '@/components/Loading'
import { message } from 'antd';
// 以懒加载方式引入组件
const Login = lazy(() => import('@/views/Login'));
const Notfind = lazy(() => import('@/views/Notfind'));
const Dashboard = lazy(() => import('@/views/dashboard/Dashboard'))
// Suspense 是react 内置的组件, 负责渲染某一个组件, 一般配合懒加载使用
// 该组件有一个 fallback,值为 组件渲染前执行的组件效果,可以值为loading 组件

const Index = () => {
    return (
        <Suspense fallback={<Loading></Loading>}>
            <Switch>
                {/* 有一个警告,重定向警告 */}
                <Route path='/login' render={(props) => {
                    if (localStorage.getItem('jwt')) {
                        // 提示用户已登录,无需重复登录
                        message.warning('已登录,不需要重复登录!!!', 1)
                        return <Redirect to='/dashboard' {...props}></Redirect>
                    }
                    return <Login {...props}></Login>
                }}></Route>
                <Route path='/dashboard' component={(props) => {
                    if (!localStorage.getItem('jwt')) {
                        return <Redirect to='/login' {...props}></Redirect>
                    }
                    return <Dashboard {...props}></Dashboard>
                }}></Route>
                <Redirect from='/' to='/login' exact></Redirect>
                <Route component={Notfind}></Route>
            </Switch>
        </Suspense>
    );
}

export default Index;
